<template>
  <view class="overtrue">
    <view
      class="content"
      :style="{
        transform: `translateY(${safeTop + 'px'})`,
        height: safeHeight + 'px',
      }"
    >
      <view  class="head" :style="{ height: `${headHeight}` }">
        <view
          class="menu"
          :style="{
            height: menuButtonHeight + 'px',
          }"
        >
          <view
            class="jiaonan"
            :style="{
              height:capsuleHeight+'px',
              width: capsuleWidth + 'px',
              left:capsuleLeft+'px',
              top:menuButtonTop+'px'
            }"
          ></view>
          <view v-if="inVisualingBtn===2" class="visualCmd" :style="{height:(capsuleHeight-2*capsuleHeight/100)+'px',left:margin+'px',top:menuButtonTop+'px',margin:`${capsuleHeight/100}px`,width: safeWidth-(capsuleLeft+margin/2)-(margin*2+capsuleHeight)+'px'}">
            <view class="month">
              <picker mode="date" fields="month" @change="Picker">
                {{ today.year }}年{{ today.month }}月
              </picker>
             </view>
            <view class="mode">
              <view class="expend" :class="[ visualMode===1?'mode-active':'']" :style="{border: visualMode===1?`${capsuleHeight/100}px solid rgba(218,218,218,0.9)`:''}" @tap="expend">支出</view>
              <view class="receipts" :class="[ visualMode===2?'mode-active':'']" :style="{border: visualMode===2? `${capsuleHeight/100}px solid rgba(218,218,218,0.9)`:''}" @tap="receipts">入账</view>
            </view>
          </view>
          <view v-if="inVisualingBtn!==2" class="set" :style="{height:(capsuleHeight-2*capsuleHeight/100)+'px',width:capsuleHeight+'px',right:(capsuleLeft+margin/2)+'px',top:menuButtonTop+'px' ,border: `${capsuleHeight/100}px solid rgba(218,218,218,0.9)`}" @tap="touchSet"></view>
          <view v-if="inVisualingBtn===2" class="back" :style="{height:(capsuleHeight-2*capsuleHeight/100)+'px',width:capsuleHeight+'px',right:(capsuleLeft+ margin/2)+'px',top:menuButtonTop+'px' ,border: `${capsuleHeight/100}px solid rgba(218,218,218,0.9)`}" @tap="back"></view>
        </view>
        <view  class="head-content" :style="{bottom:inVisualingBtn!==2?'0%':'200%', height: headContentHeight }">
          <Calendar />
        </view>
      </view>
      <view
        class="body"
        :style="{height:inVisualingBtn===0?'35%':inVisualingBtn===2?'100%':'30%'}"
        @touchstart="TapStart"
        @touchmove="TouchMove"
        @touchend="TapEnd"
        @longpress="LongPress"
      >
        <view class="body-content" :style="{height:bodyHeight,width: bodyWidth}">
          <Board/>
          <view v-if="inVisualingBtn===2" class="visual">
            <visual/>
          </view>
        </view>
      </view>
      <view class="tail" :style=" {transform: inVisualingBtn!==2?'':'translateY(500%)',  width: inVisualingBtn!==2?'100%':'0%',opacity:inVisualingBtn!==2?'100%':'0%'}">
        <BillList />
        <Cin />
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref ,watch} from 'vue';
import { onShow, onHide, onLoad } from '@dcloudio/uni-app';
import Cin from './components/cin.vue';
import BillList from './components/bill-list.vue';
import Board from './components/ board.vue';
import Calendar from './components/calendar.vue';
import visual from './components/visual.vue';
import type { todayType } from '@/types/bill';
import { useBillStore } from '@/stores/bill';

////变量区
const billStore = useBillStore();
let safeTop = ref<number>(0);
let safeHeight = ref<number>(0);
let safeWidth = ref<number>(0);
let menuButtonHeight = ref<number>(0);
let menuButtonWidth = ref<number>(0);
let menuButtonRight = ref<number>(0);
let menuButtonTop = ref<number>(0);
let today = ref<todayType>({
  year: 0,
  month: 0,
  day: 0,
  paymentList: [],
});
let headContentHeight = ref<string>('');
let headHeight = ref<string>('20%');
const capsuleHeight=ref<number>(0)// 胶囊按钮的高度
const capsuleWidth=ref<number>(0)// 胶囊按钮的宽度
const capsuleLeft=ref<number>(0)//胶囊按钮的左边界x坐标
const capsuleTop=ref<number>(0)//胶囊按钮的顶点y坐标
/**可视化模式 */
const inVisualingBtn=ref<number>(-1)
const bodyHeight=ref<string>('91%')
const bodyWidth=ref<string>('95%')
const margin=ref<number>(0)
/**日历开关 */
let calendarBtn=false
/**可视化模式 */
const visualMode=ref<number>(1)

////函数区
//日期选择器
function Picker(event: { detail: { value: string } }) {
  let temp = event.detail.value;
  today.value.year = Number(temp.split('-')[0]);
  today.value.month = Number(temp.split('-')[1]);
  today.value = billStore.GetDayData(today.value.year, today.value.month, today.value.day);
  uni.$emit('openVisual', today.value);
}
function expend(){
  visualMode.value=1
  uni.$emit('modeVisual', visualMode.value)
}
function receipts(){
  visualMode.value=2
  uni.$emit('modeVisual', visualMode.value)
}
onLoad(() => {
  console.log('home Load');
  Init();
});
onShow(() => {
  console.log('home Show');
  Init();
});
onHide(() => {
  console.log('home Hide');
  back()
});

//初始化
function Init() {
  GetWindowsSafe();
  GetCapsule();
  GetHeadContentHeight();
  GetDayData();
  uni.$emit('openCin');
  uni.$emit('showCalByIndex', false);
}
//获取安全区域
function GetWindowsSafe() {
  let safe = uni.getSystemInfoSync().safeArea;
  safeTop.value = safe!.top;
  safeHeight.value = safe!.height;
  safeWidth.value=safe!.width;
  margin.value=safe!.width*0.05/2
}
//获取胶囊区域
function GetCapsule() {
  let systemInfo = uni.getSystemInfoSync();
  let safe = systemInfo.safeArea;
  let menuButtoninfo = uni.getMenuButtonBoundingClientRect();
  menuButtonTop.value = menuButtoninfo.top - safe!.top;
  menuButtonRight.value = safe!.right - menuButtoninfo.right;
  menuButtonHeight.value =
    margin.value + menuButtoninfo.height+(menuButtoninfo.top-safe!.top)
  menuButtonWidth.value =
    menuButtoninfo.width + (safe!.right - menuButtoninfo.right) * 2;
  capsuleWidth.value=menuButtoninfo.width
  capsuleHeight.value=menuButtoninfo.height
  capsuleLeft.value=safe!.width-menuButtoninfo.left
  capsuleTop.value=menuButtoninfo.top-safe!.top
}
//获得头部内容区高度
function GetHeadContentHeight() {
  headContentHeight.value =
    safeHeight.value * 0.2 - menuButtonHeight.value + 'px';
}
//获取今日数据
function GetDayData() {
  const todayTemp = new Date();
  const year = todayTemp.getFullYear();
  const month = todayTemp.getMonth() + 1;
  const day = todayTemp.getDate();
  today.value = billStore.GetDayData(year, month, day);
  uni.$emit('dayData', today.value);
}
//详细日历
uni.$on('calendarShow', function (btn) {
  if (btn) {
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.screenWidth;
    const temp = (screenWidth * 600) / 750 - menuButtonHeight.value;
    headContentHeight.value = temp + 'px';
    headHeight.value = '600rpx';
    calendarBtn=true
    console.log('打开日历');
  } else {
    headContentHeight.value =
      safeHeight.value * 0.2 - menuButtonHeight.value + 'px';
    headHeight.value = '20%';
    calendarBtn=false
    console.log('关闭日历');
  }
});

//获取数据
uni.$on('dayData', function (data) {
  today.value = data;
});


let tap = reactive({
  start: 0,
  move: 0,
  moveX: 0,
  startX: 0,
});
function TapStart(event: TouchEvent) {
  tap.start = event.touches[0].clientY;
  tap.startX = event.touches[0].clientX;
  tap.moveX=0
}
function TouchMove(event: TouchEvent) {
  tap.move = tap.start - event.touches[0].clientY;
  tap.moveX = tap.startX - event.touches[0].clientX;
}
function LongPress(){
  if(inVisualingBtn.value!==2){
    console.log('开始触摸')
    let time=0
    inVisualingBtn.value=0
    let setIntervalBox=setInterval(()=>{
      time+=1
      if(inVisualingBtn.value===1){
        console.log("取消进入可视化")
        clearInterval(setIntervalBox)
      }
      if(time>=300){
        console.log('进入可视化')
        inVisualingBtn.value=2
        setTimeout(()=>{
          uni.$emit('openVisual', today.value);
        },1)
        clearInterval(setIntervalBox)
      }
    },1)
  }
}


let calMoveBtn = true;
function TapEnd() {
  if (calMoveBtn) {
    calMoveBtn = false;
    setTimeout(() => {
      calMoveBtn = true;
    }, 500);
    if (Math.abs(tap.move) > Math.abs(tap.moveX)) {
      if (tap.move >= 50) {
        console.log('上移动');
        if(inVisualingBtn.value!==2){
          uni.$emit('showCalByIndex', false);
          calendarBtn=false
        }
      } else {
        console.log('下移动');
        if(inVisualingBtn.value!==2){
          uni.$emit('showCalByIndex', true);
          calendarBtn=true
        }
      }
    }else{
      if(tap.moveX>=50){
        console.log('大面板左移')
        if(inVisualingBtn.value!==2){
          uni.$emit('boardLeft',calendarBtn);
        }
      }else if(tap.moveX<-50){
        console.log('大面板右移')
        if(inVisualingBtn.value!==2){
          uni.$emit('boardRight',calendarBtn);
        }
      }
      
    }
  }
  if(inVisualingBtn.value!==2){
    inVisualingBtn.value=1
  }
  console.log('离开')
}


function touchSet(){
  uni.navigateTo({
    url: `/pages/set/index?year=${today.value.year}&month=${today.value.month}&day=${today.value.day}`
  });
}
function back(){
  inVisualingBtn.value=-1
}

watch(inVisualingBtn, (newValue) => {
  switch(newValue){
    case -1:
    Init()
    uni.$emit('showCalByIndex', true);
    uni.$emit('showCalByIndex', false);
    bodyHeight.value='91%'
    bodyWidth.value='95%'
      break;
    case 0:
    bodyHeight.value='100%'
    bodyWidth.value='100%'
      break;
    case 1:
    bodyHeight.value='91%'
    bodyWidth.value='95%'
      break;
    case 2:
    bodyHeight.value='100%'
    bodyWidth.value='95%'
    headHeight.value= ''
      break;
  }
});
</script>

<style scoped>
.overtrue {
  width: 750rpx;
  height: 100vh;
  background: rgb(247, 247, 247);
}
.content {
  width: 750rpx;
  background: rgb(247, 247, 247);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.head {
  width: 100%;
  position: relative;
  transition: all ease 0.5s;
  display: flex;
}

.menu {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
}
.jiaonan{
  position: absolute;
  /* background-color: red; */
}
.visualCmd{
  position: absolute;
  display: flex;
  justify-content: space-between;
}
.month{
  height: 100%;
  display: flex;
  align-items: center;

  cursor: pointer;
  color: rgb(58, 58, 58);
  font-size: 34rpx;
}
.mode{
  width: 40%;
  height: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  color: rgb(201, 201, 201);
}
.expend{
  width: 50%;
  height: 90%;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 25rpx;
}
.mode-active{
  font-size: 27rpx;
  background-color: white;
  border-radius: 15rpx;
  color: rgb(58, 58, 58);
}
.receipts{
  width: 50%;
  height: 90%;
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 25rpx;
}

.set{
  position: absolute;
  background-color: rgb(254,254,254);
  border-radius: 50%;
  background-image: url('../../static/set.png');
  background-size: cover;
  background-size: 55% 55%; /* 设置背景图片的具体宽度和高度 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  cursor: pointer;
} 
.back{
  position: absolute;
  background-color: rgb(254,254,254);
  border-radius: 50%;
  background-image: url('../../static/back.png');
  background-size: cover;
  background-size: 55% 55%; /* 设置背景图片的具体宽度和高度 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  cursor: pointer;
}
.set:active {
  background-color: rgb(194, 193, 193);
}

.fit {
  flex: 1;
  height: 100%;
  position: relative;
}
.fit-button {
  position: absolute;
  left: 0;
  height: 100%;
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
}
.fit-button:active {
  background-color: rgb(229, 229, 229);
}
.head-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 95%;
  transition: all ease 0.5s;
}
.visual{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-100%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 15px;
  display: flex;
  justify-content: center;
}
.body {
  width: 100%;
  background: rgb(247, 247, 247);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease 0.5s;
}
.body-content{
  border-radius: 15px;
  position: relative;
  background: white;
  transition: all ease 0.5s;
}

.tail {
  width: 100%;
  flex: 1;
  flex-direction: column;
  position: relative;
}
</style>
